<template>
  <div class="thread-progressbar"></div>
</template>

<style scoped lang="scss">
.thread-progressbar {
  position: relative;
  width: 200px;
  height: calc(1.4142 * 20px);
  border-radius: 20px;
  overflow: hidden;
  background: repeating-linear-gradient(
      45deg,
      #3c9,
      #3c9 10px,
      transparent 11px,
      transparent 19px,
      #3c9 20px
    )
    0 0 content-box;
  animation: twill 1s linear infinite;
  &::after {
    position: absolute;
    width: 200px;
    height: 100%;

    background-image: linear-gradient(
      rgba(#000, 0.5),
      rgba(#fff, 0.5),
      rgba(#000, 0.5)
    );
    content: '';
  }
}
@keyframes twill {
  to {
    background-position-y: calc(-1 * 1.4142 * 40px);
  }
}
</style>
